<template>
  <div class="head-line">
    <div class="body-cont">
      <div v-if="addressArr.length > 0">
        <radio-group @change="radioChange">
          <div class="card-shadow" v-for="(v,i) in addressArr" :key="i">
            <div class="addr-box flex-box weui-cell weui-cell_access">
              <div class="flex-1" @tap="selectAddr(v)">
                <div class="flex-box align-start">
                  <div class="name-box">
                    <p class="name ellipsis">{{v.custName}}</p>
                    <p class="flag red" v-if="v.defaultStatus === '0'">默认</p>
                    <p class="flag" v-else> </p>
                  </div>
                  <div class="flex-1">
                    <p class="tel">{{v.phone}}</p>
                    <p class="addr">{{v.areaValue + ' ' + v.address}}</p>
                  </div>
                </div>
              </div>
              <i class="icon icon-edit" @tap="editAddr(v)" ></i>
            </div>
            <div class="default-box">
              <label class="weui-cell weui-check__label" >
                <radio class="weui-check" :value="i" :checked="v.defaultStatus === '0'"/>
                <view class="weui-cell__bd">设为默认地址</view>
                <view class="weui-cell__ft weui-cell__ft_in-radio" v-if="v.defaultStatus === '0'">
                  <icon class="weui-icon-radio" type="success_no_circle" size="18"></icon>
                </view>
              </label>
            </div>
          </div>
        </radio-group>
      </div>
      <div class="empty text-center" v-else>
        <div class="icon icon-empty"></div>
        <p class="font14">请添加地址</p>
      </div>
    </div>
    <div class="btn-box text-center">
      <navigator url="/pages/editAddr/main" class="btn-light" >新建地址</navigator>
    </div>
  </div>
</template>
<script>
import getAddressList from '@/interface/address/getAddressList'
import changeDefaultStatus from '@/interface/address/changeDefaultStatus'
import getAreaList from '@/interface/address/getAreaList'

export default {
  components: { },
  data () {
    // [
    //   {
    //     'address': 'string',
    //     'areaCode': 'string',
    //     'custId': 'string',
    //     'custName': 'string',
    //     'defaultStatus': 'string', '0' => 默认地址，'1' => 非默认地址
    //     'id': 'string',
    //     'phone': 'string'
    //   }
    // ]
    return {
      addressArr: [],
      regionRange: [[], [], []]
    }
  },
  computed: {

  },
  methods: {
    async getAreaList (column, id) {
      let arr = []
      arr[0] = await getAreaList({id: 0})
      arr[1] = await getAreaList({id: arr[0][0].areaCode})
      arr[2] = await getAreaList({id: arr[1][0].areaCode})
      this.regionRange = arr
      this.setAreaValue()
    },
    setAreaValue () {
      const arr = [...this.addressArr]
      this.addressArr = arr.map(v => {
        const index = this.regionRange[2].findIndex(val => val.areaCode === v.areaCode)
        if (index > -1) {
          v.areaValue = `${this.regionRange[0][0].areaName}/${this.regionRange[1][0].areaName}/${this.regionRange[2][index].areaName}`
        }
        return v
      })
    },
    editAddr (v) {
      console.log(v)
      const url = `/pages/editAddr/main?addressId=${v.id}`
      wx.navigateTo({ url })
    },
    radioChange (e) {
      const index = e.mp.detail.value
      console.log(this.addressArr)
      this.addressArr = this.addressArr.map((v, i) => {
        v.defaultStatus = Number(index) === i ? '0' : '1'
        return v
      })
      changeDefaultStatus({
        id: this.addressArr[index].id,
        defaultStatus: '0'
      }).then(v => {
        this.dialog.showToast('修改成功', 'success')
      })
    },
    selectAddr (addr) {
      if (this.$root.$mp.query.type === 'select') {
        this.globalData.store.selectAddr = addr
        this.navigateBack()
      }
    }
  },
  onShow () {
    getAddressList().then(list => {
      this.addressArr = list.map(v => {
        v.areaValue = ''
        return v
      })
      this.getAreaList()
    })
  },
  beforeMount () {
    if (!this.cookie.isLogin()) {
      wx.navigateTo({ url: '/pages/login/main' })
    }
  }
}
</script>
<style lang="less">
page {
  background-color: #f9f9f9;
}
.card-shadow {
  margin-bottom: 30rpx;
}
.addr-box {
  background-color: #fff;
  padding: 42rpx 28rpx;
  min-height: 228rpx;
}
.addr-box .align-start {
  align-items: flex-start;
}
.addr-box .name-box {
  min-width: 120rpx;
}
.addr-box .name-box .name {
  font-size: 30rpx;
  color: #000;
  margin-bottom: 24rpx;
}
.addr-box .name-box .flag {
  display: inline-block;
  font-size: 24rpx;
  line-height: 1;
  padding: 6rpx 10rpx;
  border-radius: 8rpx;
}
.addr-box .name-box .flag.red {
  color: #fa4b70;
  border: 1rpx solid;
}
.addr-box .tel {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}
.addr-box .addr {
  font-size: 28rpx;
  line-height: 42rpx;
  color: #888;
  width: 420rpx;
}
.addr-box .icon-edit {
  width: 32rpx;
  height: 32rpx;
}
.default-box .weui-cell__bd {
  line-height: 48rpx;
}
.default-box .weui-icon-radio {
  height: 44rpx;
}
.empty {
  padding-top: 100rpx;
}
.btn-box {
  padding: 0 44rpx;
}
</style>